<template>
  <view class="agreement-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <text class="nav-title">购买协议</text>
    </view>

    <!-- 协议内容 -->
    <view class="agreement-content">
      <view class="agreement-header">
        <text class="agreement-title">听鸽共享充电桩购买协议</text>
        <text class="agreement-date">更新日期：2024年1月1日</text>
      </view>

      <view class="agreement-body">
        <view class="agreement-section">
          <text class="section-title">第一条 协议双方</text>
          <text class="section-content">本协议由购买方（用户）与听鸽科技有限公司（以下简称"本公司"）共同签署。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第二条 产品说明</text>
          <text class="section-content">本协议涉及的产品为听鸽共享充电桩设备，包括充电桩主体、安装配件及相关服务。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第三条 购买条款</text>
          <text class="section-content">1. 用户确认已充分了解产品功能、技术参数及使用方法；\n2. 产品价格以订单确认页面显示为准；\n3. 支付成功后，本公司将安排专业人员进行安装服务。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第四条 安装服务</text>
          <text class="section-content">1. 本公司提供免费上门安装服务；\n2. 安装地点需符合相关安全标准；\n3. 安装完成后提供设备使用培训。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第五条 质保服务</text>
          <text class="section-content">1. 产品享受1年免费质保服务；\n2. 质保期内免费维修或更换故障部件；\n3. 人为损坏不在质保范围内。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第六条 用户权利与义务</text>
          <text class="section-content">1. 用户有权享受产品的正常使用功能；\n2. 用户应按照说明书正确使用设备；\n3. 发现设备故障应及时联系客服。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第七条 免责条款</text>
          <text class="section-content">因不可抗力因素导致的设备损坏或服务延误，本公司不承担责任。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第八条 争议解决</text>
          <text class="section-content">本协议如发生争议，双方应友好协商解决；协商不成的，可向有管辖权的人民法院提起诉讼。</text>
        </view>

        <view class="agreement-section">
          <text class="section-title">第九条 协议生效</text>
          <text class="section-content">本协议自用户点击同意并完成支付后生效，具有法律约束力。</text>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="contact-info">
        <text class="contact-title">联系我们</text>
        <text class="contact-item">客服热线：400-123-4567</text>
        <text class="contact-item">客服邮箱：service@tingge.com</text>
        <text class="contact-item">工作时间：周一至周日 9:00-18:00</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.agreement-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
  z-index: 1000;
}

.nav-back {
  position: absolute;
  left: 15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.agreement-content {
  margin-top: 44px;
  padding: 20px;
}

.agreement-header {
  text-align: center;
  margin-bottom: 30px;
}

.agreement-title {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10px;
}

.agreement-date {
  font-size: 14px;
  color: #666666;
  display: block;
}

.agreement-body {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.agreement-section {
  margin-bottom: 25px;
}

.agreement-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10px;
}

.section-content {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  display: block;
  white-space: pre-line;
}

.contact-info {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
}

.contact-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 15px;
}

.contact-item {
  font-size: 14px;
  color: #666666;
  display: block;
  margin-bottom: 8px;
}

.contact-item:last-child {
  margin-bottom: 0;
}
</style>